<template>
	<s-layout title="售后订单">
		<su-sticky bgColor="#fff">
			<uni-search-bar placeholder="请输入售后单号" radius="27" @confirm="search" @cancel="search" />
			<su-tabs :list="state.tabs" lineColor="#3A43FF" :scrollable="false" @change="changeTab"
				:current="state.activeTab"></su-tabs>
		</su-sticky>
		<view class="content">
			<view class="card" v-for="item in state.list" :key="item.id" @click="toDetil(item.id)">
				<view class="user">
					<text>{{item.user_consignee}}：{{item.mobile}}</text>
					<image class="phone" src="../../static/phone.png" mode="aspectFill"></image>
				</view>
				<view class="order-info" style="color:#ff0000">{{item.aftersale_status_desc}}</view>
				<view class="order-info">
					<text>售后单号：{{item.aftersale_sn}}</text>
				</view>
				<view class="order-info">
					<text>申请时间：{{item.aftersale_sn}}</text>
				</view>
				<view class="order-info">
					<text>处理状态：{{item.aftersale_status_text}}</text>
				</view>
				<view class="order-info">
					<text>售后类型：{{item.type_text}}</text>
				</view>
				<!-- 退款类型并退款完成 -->
				<view class="order-info" v-if="item.aftersale_status == 2 && item.type == 'refund'">
					<text>退款金额：{{item.refund_fee}}</text>
				</view>
				<view class="goods-box border-bottom pb-2">
					<img :src="sheep.$url.cdn(item.goods_image)" alt="" class="goods-img" />
					<view class="info">
						<view class="">
							{{item.goods_title}}
						</view>
						<view class="quantity">
							<text>×{{item.goods_num}}</text>
							<text class="price">￥{{item.goods_price}}</text>
						</view>
					</view>
				</view>
				<view class="total">
					<view>
						订单实付金额：
						<text class="price">￥{{item.pay_fee}}</text>
						<!-- (含运费：￥{{item.freight}}) -->
					</view>
				</view>
				<view class="more-btn" v-if="item.aftersale_status == 0">
					<!-- <button class="ss-reset-button more" @tap.stop="">
						更多
					</button> -->
					<view class="btns">
						<button class="ss-reset-button" @tap.stop="refuseminFun(item)">
							拒绝退款
						</button>
						<button class="ss-reset-button shipping" @tap.stop="confimRetrun(item)">
							确认退款
						</button>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more v-if="state.list.length > 0" :status="state.loadStatus" :content-text="{
		    contentdown: '上拉加载更多',
		  }" @tap="loadmore" />
		<s-empty v-if="state.list.length === 0" icon="/static/soldout-empty.png" text="暂无商品">
		</s-empty>
		<!-- 驳回原因弹框 -->
		<view :class="{ 'share-box': state.showRefuseminModel }"></view>
		<view :class="{ 'share-box': state.showConfimModel }"></view>
		<view class="model" v-if="state.showRefuseminModel" :class="{ 'share-show': state.showRefuseminModel }">
			<!-- 文本 -->
			<view class="wxbox">
				<view class="d-flex j-center pb-2">驳回原因</view>
				<view class="wxbox-inpt-box">
					<textarea class="wxbox-inpt" v-model="state.refuseParamsData.refuse_msg" placeholder="请输入驳回原因" />
				</view>
				<view class="btn btn-back" @click="refuseminConfimFun">确认驳回</view>
				<view class="close" @click="state.showRefuseminModel = false">
					<icon type="clear" size="26" />
				</view>
			</view>
		</view>
		<!-- 同意退款弹框 -->
		<view class="model" v-if="state.showConfimModel" :class="{ 'share-show': state.showConfimModel }">
			<!-- 文本 -->
			<view class="wxbox">
				<view class="d-flex j-center pb-2 ">同意退款</view>
				<view class="wxbox-inpt-box w-90 pl-4 pr-4">
					<view class="d-flex w-100 pb-2" style="border-bottom: 1rpx solid #eee;">
						<view style="color:#999;">￥</view>
						<input class="wxbox-inpt-confim" style="font-size:28rpx;" type="Number" v-model="state.confimParamsData.refund_money"
							placeholder="请输入退款金额" />
					</view>
					<view class="pt-2">
						<radio-group class="d-flex" @change="onRefundChange">
							<label class="ss-flex ss-col-center ss-p-y-10" v-for="(item, index) in state.refundTypeList"
								:key="index">
								<radio :checked="state.confimParamsData.refund_type === item.value" color="#6780FF"
									style="transform: scale(0.8)" :value="item.value" />
								<view class="item-value ss-m-l-8">{{ item.text }}</view>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="btn btn-back" @click="confimRetrunFun">确认退款</view>
				<view class="close" @click="state.showConfimModel = false">
					<icon type="clear" size="26" />
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
import {
	reactive
} from 'vue';
import {
	onLoad,
	onReachBottom
} from "@dcloudio/uni-app"
import sheep from '@/sheep';

const state = reactive({
	keyword: "",
	activeTab: 0,
	tabs: [{
		name: '全部',
		value: 'all'
	}, {
		name: '未处理',
		value: 'nooper'
	}, {
		name: '处理中',
		value: 'ing'
	}, {
		name: '已完成',
		value: 'completed'
	}, {
		name: '已拒绝',
		value: 'refuse'
	}],
	list: [],
	page: 1,
	pageSize: 20,
	type: 'all',
	loadStatus: 'noMore',
	// 驳回
	refuseParamsData: {
		id: '',
		refuse_msg: ''
	},
	showRefuseminModel: false,
	// 同意
	confimParamsData: {
		id: '',
		refund_money: '', //退款金额
		refund_type: 'back', //退回路线 back原路 money电子钱包
	},
	showConfimModel: false,
	refundTypeList: [
	{
		text: '原路退回',
		value: 'back',
	},
	{
		text: '电子钱包',
		value: 'money',
	}, ],
})

function toDetil (id) {
	sheep.$router.go('/manage/pages/order/detail', { id: id });
}

function search (e) {
	state.keyword = e.value;
	emptyList();
	getList();
}

function changeTab (value) {
	state.type = state.tabs[value.index].value
	state.activeTab = value.index;
	emptyList();
	getList();
}

/**
 * @拒绝退款
 */
function refuseminFun (item) {
	state.refuseParamsData.id = item.id
	state.showRefuseminModel = true
}
async function refuseminConfimFun () {
	if (!state.refuseParamsData.id) {
		uni.showToast({
			title: '请选择要驳回的订单!',
			icon: 'none'
		});
		return
	}
	if (state.refuseParamsData.refund_money == '') {
		uni.showToast({
			title: '请输入退回金额!',
			icon: 'none'
		});
		return
	}
	const res = await sheep.$api.material.materialRefusemin(state.refuseParamsData);
	state.showRefuseminModel = false
	uni.showToast({
		title: res.message,
		icon: 'none'
	});
	setTimeout(() => {
		getList()
	}, 1000)
}
/**
 * @同意退款
 */
function confimRetrun (item) {
	state.confimParamsData.id = item.id
	state.showConfimModel = true
	console.log(state.confimParamsData)
}

function onRefundChange (e) {
	state.confimParamsData.refund_type = e.detail.value;
}
async function confimRetrunFun(){
	if (!state.confimParamsData.id) {
		uni.showToast({
			title: '请选择要审核的订单!',
			icon: 'none'
		});
		return
	}
	const res = await sheep.$api.material.materialRefuseminConfim(state.confimParamsData);
	state.showConfimModel = false
	uni.showToast({
		title: res.message,
		icon: 'none'
	});
	setTimeout(() => {
		getList()
	}, 1000)
}

async function getList () {
	state.loadStatus = 'loading';
	const info = {
		type: state.type,
		keyword: state.keyword,
		page: state.page,
		list_rows: state.pageSize,
	}
	const res = await sheep.$api.material.materialList(info);
	if (res.code === 1) {
		console.log(res.data)
		let newArr = res.data.data
		let initArr = state.list ? state.list : []
		const lastListNum = newArr.length
		if (state.page == 1) {
			state.list = res.data.data
		} else {
			state.list = initArr.concat(newArr)
		}
		if (lastListNum < state.pageSize) {
			state.loadStatus = 'noMore';
		} else {
			state.loadStatus = 'more';
		}
		console.log(state.list, '168')
	}
}

function emptyList () {
	state.page = 1;
	state.list = [];
	state.loadStatus = 'noMore';
}

// 加载更多
function loadmore () {
	if (state.loadStatus !== 'noMore') {
		state.page++;
		getList();
	}
}

// 上拉加载更多
onReachBottom(() => {
	loadmore();
});

onLoad((options) => {
	getList();
});
</script>

<style lang="scss" scoped>
.content {
	padding: 28rpx;
}

.card {
	background-color: #fff;
	border-radius: 24rpx;
	padding: 28rpx;
	margin-bottom: 24rpx;

	>view {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

.user {
	padding: 16rpx;
	background: #F7F7F7;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	font-size: 28rpx;
	color: #333333;

	.phone {
		width: 58rpx;
		height: 58rpx;
	}
}

.order-info {
	margin-top: 26rpx;
	font-size: 26rpx;
	color: #999999;

	.status {
		font-weight: 600;
		font-size: 28rpx;
		color: #666666;
	}
}

.goods-box {
	margin-top: 30rpx;
	justify-content: start !important;

	.goods-img {
		width: 156rpx;
		height: 156rpx;
		background: #000000;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-right: 30rpx;
	}

	.info {
		flex: 1;
		height: 156rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 26rpx;
		color: #999999;

		.title {
			font-weight: bold;
			font-size: 30rpx;
			color: #1A1A1A;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			/* 这里是超出几行省略 */
			overflow: hidden;
		}

	}

	.quantity {
		display: flex;
		justify-content: space-between;
		align-items: end;
		font-size: 26rpx;
		color: #1A1A1A;
	}

}

.price {
	font-weight: 500;
	font-size: 28rpx;
	color: #1A1A1A;
}

.total {
	justify-content: end !important;
	margin-top: 30rpx;
}

.more-btn {
	margin-top: 36rpx;
	display: flex;
	justify-content: space-between;
	font-weight: 400;
	font-size: 24rpx;
	color: #1A1A1A;

	.more {
		width: 100rpx;
	}

	.btns {
		display: flex;
		justify-content: end;
		flex: 1;

		>button {
			border-radius: 100rpx;
			width: 166rpx;
			height: 66rpx;
			line-height: 66rpx;
			text-align: center;
			background: #F7F7F7;
			border-radius: 38rpx 38rpx 38rpx 38rpx;
			margin-left: 20rpx;
		}

		.shipping {
			color: #fff;
			background: linear-gradient(90deg, #6780FF 0%, #3A43FF 100%);
		}
	}
}

// 驳回弹框样式
// 进入分享动画
.share-show {
	transition: all 2s ease;
	transform: translateY(0%) !important;
}

.share-box {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0rpx;
	left: 0rpx;
	bottom: 0rpx;
	right: 0rpx;
	background-color: rgba(0, 0, 0, 0.4);
	transition: 0.3s;
	z-index: 999;
}

.model-mask {
	width: 100vw;
	height: 100vh;
	background: rgba(51, 51, 51, 0.5);
	// background-image: url('/static/newImg/user/modelback.png');
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	transition: 0.8s;
}

.model {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	// height: 700upx;
	border-radius: 8upx;
	z-index: 1000;
	transition: all 0.8s ease;
	transform: translateY(100%);

	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;

	//微信弹窗
	.btn {
		width: 70%;
		margin: 20rpx auto;
		margin-top: 40rpx;
		padding: 20rpx 0px;
		text-align: center;
		border-radius: 34px;
		font-size: 30rpx;
		color: #fff;
		position: absolute;
		bottom: 0;
		left: 15%;
	}

	.wxbox {
		z-index: 998;
		width: 82%;
		height: 450upx;
		overflow-y: scroll;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 30rpx 0rpx;
		position: relative;

		.close {
			position: absolute;
			top: 5px;
			right: 10px;
			z-index: 999;
			text-align: center;
		}

		.wxbox-inpt-box {
			width: 100%;
			box-sizing: border-box;
			margin: 10upx auto;
			padding: 20upx 0 20upx 0;
			height: 60%;
			overflow: scroll;

			.wxbox-inpt {
				font-size: 26upx;
				color: #999;
				border-radius: 10upx;
				width: 100%;
				padding: 10rpx 20rpx;
				font-weight: 400;
			}

			.wxbox-inpt-confim {
				font-size: 26upx;
				color: #999;
				border-radius: 10upx;
				width: 100%;
				font-weight: 400;
			}
		}
	}
}
</style>